{% extends "contifyuser/view_profile.html" %}
{% load tags %}
        {% block user_profile_settings %}
        <div class="nobreak clearbreak">
            <div class="nobreak clearbreak">
                <a href="#" id="upload_pic_link">
                    Change Pic
                </a>
            </div>
            <div class="nobreak clearbreak">
                <a href="#" id="edit_profile_link">Edit Profile</a>
            </div>
            <div class="nobreak clearbreak">
                <a href="#" id="email_settings_link">Email Settings</a>
            </div>
            <div class="nobreak clearbreak">
                <a href="#" id="change_password_link">Change Password</a>
            </div>
        </div>
        <!-- Change Pic div -->
        <div id="id_pic_upload" class="picUploadDiv" style="display: none;">            
            <div class="picUploadClose">
                <img id="id_pic_upload_close" class="picUploadCloseImg" src="/{{ media_url }}images/close.png"/>
            </div>
            <div class="picUploadTopSpacer">
                <div class="picUploadPic">
                    {{ mem_grp_data.0.photo_path|thumbnail }}
                </div>
                <form id="picUploadForm" method="POST" action="{% url contifyuser.views.home %}" enctype="multipart/form-data">
                    <input type="hidden" id="picUpload_action" name="action" value="Picture_Upoad"/>
                    <div class="picUploadValue">
                        {{ pic_form.photo }}
                    </div>
                    <div class="picUploadSubmit">
                        <input class="picUploadIcon" title="upload" type="image" src="/{{ media_url }}/images/picUploadIcon.png"/>
                    </div>
                </form>
            </div>
        </div>        
        
        <!-- Edit Profile div -->
        <div id="id_edit_profile" class="editProfileDiv" style="display: none;">            
            <div class="editProfileClose">
                <img id="id_edit_profile_close" class="editProfileCloseImg" src="/{{ media_url }}images/close.png"/>
            </div>
            <div class="editProfileSeaction">
                <div class="profileOriginalValues">
                    <span>
                        {{mem_grp_data.0.first_name}}  {{mem_grp_data.0.last_name}}
                    </span>
                    <span class="noRightBreak">
                        <a href="#"  onclick="toggleEditFields('name_change_link_show', 'name_change_link_hide', 'name_change')" id="name_change_link_show">update</a>
                        <a href="#"  onclick="toggleEditFields('name_change_link_show', 'name_change_link_hide', 'name_change')" id="name_change_link_hide" style="display: none;">hide</a>                
                    </span>
                </div>
                <div class="newEditValues" id="name_change" style="display:none;">
                    {{ edit_profile_form.first_name}}  {{ edit_profile_form.last_name }}
                </div>

                <div class="profileOriginalValues">
                    <span>
                        {{mem_grp_data.0.mem_city}}
                    </span>
                    <span class="noRightBreak">
                        <a href="#"  onclick="toggleEditFields('city_change_link_show', 'city_change_link_hide', 'city_change')" id="city_change_link_show">update</a>
                        <a href="#"  onclick="toggleEditFields('city_change_link_show', 'city_change_link_hide', 'city_change')" id="city_change_link_hide" style="display: none;">hide</a>
                    </span>
                </div>
                <div class="newEditValues" id="city_change" style="display:none;">
                    {{ edit_profile_form.city}}
                </div>
                
                <div class="profileOriginalValues">
                    <span>
                        {{mem_grp_data.0.mem_country}}
                    </span>
                    <span class="noRightBreak">
                        <a href="#"  onclick="toggleEditFields('country_change_link_show', 'country_change_link_hide', 'country_change');return false;" id="country_change_link_show">update</a>
                        <a href="#"  onclick="toggleEditFields('country_change_link_show', 'country_change_link_hide', 'country_change');return false;" id="country_change_link_hide" style="display: none;">hide</a>
                    </span>
                </div>
                <div class="newEditValues" id="country_change" style="display:none;">
                    {{ edit_profile_form.country}}
                </div>
                <div class="editProfileSubmit">
                    <img id="edit_submit" src="/{{ media_url }}images/submit_icon.png"/>
                </div>
            </div>
        </div>
        
        <!-- Email Settings div -->
        <div id="id_email_settings" class="emailSettingsDiv" style="display:none;">            
            <div class="emailSettingsClose">
                <img id="id_email_settings_close" class="emailSettingsCloseImg" src="/{{ media_url }}images/close.png"/>
            </div>
            <div class="editHeader">
                Update Email Settings
            </div>
            <div class="emailSettingsEditSection">
                <div class="emailSettingsSingleField">
                    <div class="nobreak">
                        <input type="checkbox" id="create_event_chk" "{{emailChkboxList.0}}"/>
                    </div>
                    <div class="emailSettingsChkbobLabel nobreak">
                        Create Event Email
                    </div>
                </div>
                <div class="emailSettingsSingleField">
                    <div class="nobreak">
                        <input type="checkbox" id="event_rsvp_chk" "{{emailChkboxList.1}}"/>
                    </div>
                    <div class="emailSettingsChkbobLabel nobreak">
                        Event RSVP Email
                    </div>
                </div>
                <div class="emailSettingsSingleField">
                    <div class="nobreak">
                        <input type="checkbox" id="new_event_comment_chk" "{{emailChkboxList.2}}"/>
                    </div>
                    <div class="emailSettingsChkbobLabel nobreak">
                        New Event Comment Email
                    </div>
                </div>                
                <div class="emailSettingsSingleField">
                    <div class="nobreak">
                        <input type="checkbox" id="message_chk" "{{emailChkboxList.3}}"/>
                    </div>
                    <div class="emailSettingsChkbobLabel nobreak">
                        New Message Email
                    </div>
                </div>
                <div class="emailSettingsSingleField">
                    <div class="nobreak">
                        <input type="checkbox" id="new_group_chk" "{{emailChkboxList.4}}"/>
                    </div>
                    <div class="emailSettingsChkbobLabel nobreak">
                        New Group Email
                    </div>
                </div>
                <div class="emailSettingsSingleField">
                    <div class="nobreak">
                        <input type="checkbox" id="join_group_chk" "{{emailChkboxList.5}}"/>
                    </div>
                    <div class="emailSettingsChkbobLabel nobreak">
                        Join Group Email
                    </div>
                </div>
                <div class="emailSettingsSingleField">
                    <div class="nobreak">
                        <input type="checkbox" id="new_discussion_chk" "{{emailChkboxList.6}}"/>
                    </div>
                    <div class="emailSettingsChkbobLabel nobreak">
                        New Discussion Email
                    </div>
                </div>
                <div class="emailSettingsSingleField">
                    <div class="nobreak">
                        <input type="checkbox" id="new_disc_comment_chk" "{{emailChkboxList.7}}"/>
                    </div>
                    <div class="emailSettingsChkbobLabel nobreak">
                        New Discussion Comment Email
                    </div>
                </div>
                <div class="emailSettingsSingleField">
                    <div class="nobreak">
                        <input type="checkbox" id="new_poll_chk" "{{emailChkboxList.8}}"/>
                    </div>
                    <div class="emailSettingsChkbobLabel nobreak">
                        New Poll Email
                    </div>
                </div>
                <div class="emailSettingsSingleField">
                    <div class="nobreak">
                        <input type="checkbox" id="new_vote_chk" "{{emailChkboxList.9}}"/>
                    </div>
                    <div class="emailSettingsChkbobLabel nobreak">
                        New Vote Email
                    </div>
                </div>
                <div class="emailSettingsSingleField">
                    <div class="nobreak">
                        <input type="checkbox" id="new_idea_chk" "{{emailChkboxList.10}}"/>
                    </div>
                    <div class="emailSettingsChkbobLabel nobreak">
                        New Idea Email
                    </div>
                </div>
                <div class="emailSettingsSingleField">
                    <div class="nobreak">
                        <input type="checkbox" id="new_announcement_chk" "{{emailChkboxList.11}}"/>
                    </div>
                    <div class="emailSettingsChkbobLabel nobreak">
                        New Announcement Email
                    </div>
                </div>                  
            </div>
            <div class="emailSettingsSubmit clearbreak">
                <img id="edit_email_settings_submit" src="/{{ media_url }}images/submit_icon.png"/>
            </div>
        </div>
        

        <!-- Change password div -->
        <div id="id_paswd_change" class="changePasswordDiv" style="display: none;">            
            <div class="changePasswordClose">
                <img id="id_pswd_change_close" class="changePasswordCloseImg" src="/{{ media_url }}images/close.png"/>
            </div>
            <div class="editHeader">
                Change Password
            </div>
            <div class="changePasswordEditSection">
                <div class="changePasswordError "id="change_paswd_error"></div>
                <div class="changePasswordSingleField">
                    <div class="changePasswordLabel nobreak">
                        Old Password
                    </div>
                    <div class="nobreak">
                        <input type="text" id="old_paswd" />
                    </div>
                </div>
                <div class="changePasswordSingleField">
                    <div class="changePasswordLabel nobreak">
                        New Password
                    </div>                
                    <div class="nobreak">
                        <input type="text" id="new_paswd1" />
                    </div>
                </div>
                <div class="changePasswordSingleField">
                    <div class="changePasswordLabel nobreak">
                        Confirm Password
                    </div>                
                    <div class="nobreak">
                        <input type="text" id="new_paswd2" />
                    </div>
                </div>
            </div>
            <div class="emailSettingsSubmit clearbreak">
                <img id="chng_pswd_submit" src="/{{ media_url }}images/submit_icon.png"/>
            </div> 
        </div>
        {% endblock %}

        {% block user_profile_activity %}{% endblock %}
        {% block user_profile_calendar %}{% endblock %}

{% block extrajs %}
    <script src="/{{ media_url }}contifyuser/js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        
        $(document).ready(function(){$("#id_pic_upload_close").click(function(){                                
                $("#id_pic_upload").fadeOut('slow');
            });
        });
        
        $(document).ready(function(){$("#upload_pic_link").click(function(){
                $("#id_pic_upload").fadeIn('slow');
            });
        });
        
        $(document).ready(function(){$("#id_edit_profile_close").click(function(){                                
                $("#id_edit_profile").fadeOut('slow');
            });
        });
        
        $(document).ready(function(){$("#edit_profile_link").click(function(){
                $("#id_edit_profile").fadeIn('slow');
            });
        });

        $(document).ready(function(){$("#id_email_settings_close").click(function(){                                
                $("#id_email_settings").fadeOut('slow');
            });
        });
        
        $(document).ready(function(){$("#email_settings_link").click(function(){
                $("#id_email_settings").fadeIn('slow');
            });
        });
        
        $(document).ready(function(){$("#id_pswd_change_close").click(function(){                                
                $("#id_paswd_change").fadeOut('slow');
            });
        });
        
        $(document).ready(function(){$("#change_password_link").click(function(){
                $("#id_paswd_change").fadeIn('slow');
            });
        });
        
        function toggleEditFields(updateid, hidelinkid, editid)
        {
            var editdiv = document.getElementById(editid);
            var updatediv = document.getElementById(updateid);
            var hidelinkdiv = document.getElementById(hidelinkid);
            
            if(updatediv != null)
            {
                if(updatediv.style.display == "")
                {
                    updatediv.style.display = "none";
                    hidelinkdiv.style.display = "";
                }
                else
                {
                    updatediv.style.display = "";
                    hidelinkdiv.style.display = "none";                    
                }
            }
            
            if (editdiv != null)
            {
                if(editdiv.style.display == "")
                {
                    editdiv.style.display = "none";
                }
                else
                {
                    editdiv.style.display = "";
                }
            }
        }
        
        $(document).ready(function(){$("#edit_submit").click(function(){
            var first_name = $("#id_first_name").val();
            var last_name = $("#id_last_name").val();
            var city = $("#id_city").val();
            var country = $("#id_country").val();
            
            jQuery.ajax({
              url: '/connectpeople/home/',
              type: 'POST',
              data: {'action': 'Profile_Edit', 'first_name':first_name, 'last_name': last_name, 'city': city, 'country': country},
              dataType: 'json',
              success: function(json){
                alert("New password saved. Cheers");
                $("#id_paswd_change").fadeOut('slow');
            },
              error: function(xhr, ajaxOptions, thrownError){
                alert("An Error Has Occurred. Please try again.");
              }
            });
        });
        });
        
        $(document).ready(function(){$("#edit_email_settings_submit").click(function(){
            /* Get the value of all input checkbox elements. One thing to note here
              is that this functionalit will break if there are more checkboxes on this page.
              Also an new email settings should be appended at the end as these values are
              taken in same order in the view*/
            var email_settings_values = [];
            $("input:checkbox").each(function(){                    
                if ($(this).is(":checked"))
                {
                    email_settings_values.push("1");
                }
                else
                {
                    email_settings_values.push("0");
                }
            });
            
            jQuery.ajax({
              url: '/connectpeople/home/',
              type: 'POST',
              data: {'action': 'Email_Settings_Update', 'email_settings_values': email_settings_values},
              dataType: 'json',
              success: function(json){
                $("#id_email_settings").fadeOut('slow');
            },
              error: function(xhr, ajaxOptions, thrownError){
                alert("An Error Has Occurred. Please try again.");
              }
            });
            
            });
        });
        
        $(document).ready(function(){$("#chng_pswd_submit").click(function(){
            var old_paswd = $("#old_paswd").val();
            var new_paswd1 = $("#new_paswd1").val();
            var new_paswd2 = $("#new_paswd2").val();
            
            jQuery.ajax({
              url: '/connectpeople/home/',
              type: 'POST',
              data: {'action': 'change_paswd', 'old_paswd':old_paswd, 'new_paswd1': new_paswd1, 'new_paswd2': new_paswd2},
              dataType: 'json',
              success: function(json){
                if(json.message == "confirmed")
                {
                    $("#id_paswd_change").fadeOut('slow');
                }
                else
                {
                    $("#change_paswd_error").html(json.message)
                }
            },
              error: function(xhr, ajaxOptions, thrownError){
                alert("An Error Has Occurred. Please try again.");
              }
            });
        });
        });
        
        $(document).ready(function(){
            $("#id_first_name").val($("#first_name_hidden").val());
            $("#id_last_name").val($("#last_name_hidden").val());
            $("#id_city").val($("#mem_city_hidden").val());
            $("#id_country").val($("#mem_country_hidden").val());
        });
        
        
    </script>
{% endblock %}

</body>



</html>


